\documentclass{sig-alt-release2}
\usepackage{url}
\usepackage{color}
\usepackage{graphics,graphicx}

\usepackage{epsfig}
\usepackage{epstopdf}

\usepackage{colortbl}
\usepackage{multirow}
\usepackage{booktabs}
\usepackage{ifthen}
\usepackage{verbatim}  

\begin{document}
\newcommand{\todo}[1]{\textcolor{red}{#1}}
\def\newblock{\hskip .11em plus .33em minus .07em}

\conferenceinfo{DIM3} {2012, Glasgow, UK} 
\CopyrightYear{2012}
\clubpenalty=10000
\widowpenalty = 10000

\title{{Neutral News - A Collaboration Of Worldwide News}}

\numberofauthors{4}
\author{
\large{Stephen Hayton, 0901244,} \textit{0901244h@student.gla.ac.uk}\\
\large{Robbie Mcilroy, 0901286,} \textit{0901286m@student.gla.ac.uk}\\
\large{Peter Ritchie, 0900077,} \textit{0900077r@student.gla.ac.uk}\\
\large{Craig Williamson, 0901482w,} \textit{0901482w@student.gla.ac.uk}\\
\affaddr{\textbf{Team C}}\\
\affaddr{\textbf{Dim3}}\\
}
\maketitle

\begin{abstract}

A website that collates the worlds news headlines, sourcing not just traditional news sites but also the likes of Al Jazeera[1] and Youtube[7] to aid in creating a balanced view of world affairs. 

\end{abstract}

\section{Aim of Application}

The aim of the application to provide tailored news to students and young adults. Users can change the application settings; adjusting the content of the application to their preferences. Preferences include: story format; videos and articles, list of preferred topics, colour of page, and font size.
Upon each visit the page will present the worlds headlines, the user can then choose from a list of topics already defined.
We also want to:

\begin{itemize}
\item Present many of the news stories in video format.
\item Ensure the application is sufficiently complex, making the scope of the project appropriate for a group of four. To fulfill this the application will draw on several web services as well as utilising several technologies.
\end{itemize}  
  
We assume that the end-user will be English speaking, the user will be interested in viewing the same story from various sites, and that the user is interested in international news. The application does not complicate the end users experience by requiring users to sign-up and to remember log-in details, thus reducing any complexity associated with database storage, instead the browser receive and store our cookies; saving the details of their preferences which encourages the notion of less complexity to handle for users.
Distribution across the web is viable so long as the application remains non-profit.
\subsection{Constraints}
The learning curve of learning Django will be a technical constraint on the team, since we have only been recently introduced to it. 
\\
The biggest constraint on the application however will be the time allocated to implement it, due to this we have adopted a rapid prototype development strategy which may result in features not exhibiting the full functionality as we would like.

\subsection{MOSCOW Rules}
The functionality to be implemented will be split using the Moscow rules[3]; must, should, could, and would like to have.\\\\
\subsubsection{Must}
\begin{itemize}
\item Present titles of text based stories alongside videos.
\item Allow the user to interact with both the articles and videos.
\item Clicking once on an article should expand that story showing a short text summary. Clicking once again should open that article in a new tab.
\end{itemize} 
\subsubsection{Should}
\begin{itemize}    	
\item On a video selection it should expand it, bring it to the center of the page, and dim the background light.
\item Make use of cookies to track the users preferences.
\item Allow the textual to video ratio of stories to be customised.
\item Emphasize the source of the story.
\end{itemize}
\subsubsection{Could}
\begin{itemize}
\item Allow the font size and colour to be changed, along with the background colour.
\item Have a scrolling bar at the top of the page displaying the current world headlines.
\item Suggest a number of topics that have been previously searched for.
\end{itemize}
\subsubsection{Would like}
\begin{itemize}
\item Include a search function with a predictive search tool.
\end{itemize}

\newpage
\section{Client Interface}
\includegraphics[scale=0.31]{dim3imgs/dim3wf1}
\\
\textbf{Figure 2.1 News Mashup Page}
\begin{enumerate}
\item A menu selection by subject. The highlighted one will indicate the selected category.
\item A dynamic scrolling text field providing the latest stories, clicking on one of these will take you to the stories source page.
\item A link to the preferences menu.
\item A selection of news stories, clicking on one of these will expand the view, providing a short introduction to the story and a "read more" link. Clicking this link will open a new tab and take the user to the stories source page.
\item A mix of videos and textual stories, the ratio of these will be customisable via the preferences menu.
\end{enumerate}
\includegraphics[scale=0.31]{dim3imgs/DIM3wf2}
\\
\textbf{Figure 2.2 Configurations Page}
\begin{enumerate}
\item A list of the current sources being used to collect stories and the topics being displayed. The user can select/unselect them according to their preferences.
\item Radio buttons to select the ratio of video and textual content.
\item The current font size and the background colour. Selecting the colour thumbnail will bring up a colour picker box from which the user can select their preferred colour.
\item A link to return to the main page, preferences changed will not be saved if this is used.
\item A save button which will save your changed preferences then return you to the home page.
\end{enumerate}


\subsection{Interface Walkthrough}
\begin{itemize}
\item The users will first be taken to the main news feed (Figure 2.1). This page will present news stories from various sources around the world. The top bar contains preset category's which will filter the
displayed news by topic. The main index page will contain the top stories over the past 24
hours. The news may be presented in either textual or video format.
\item The user may click the short descriptive text headlines which will then expand forming a box to show
a preview of the story, if the user wants to read the entire story they will click on the "more" link in
this box which will open a new tab and navigate them to the appropriate source and story. The user
may also re-click the expanded headline to hide the box again. The menu bar on the top (\textbf{Figure 2.1.1}) allows the user to browse more specific types of news stories (for example sport and politics).
\item The user also has the choice to personalize the website by filtering which sources news articles are
drawn from (\textbf{Figure 2.2.1}), the ratio of video to textual content displayed (\textbf{Figure 2.2.2}) and the
font size and colour(\textbf{Figure 2.2.3}).
\end{itemize}


\subsection{User Persona's}
\begin{itemize}
\item Sally is a 23 year old office worker. She enjoys finding funny news stories not on regular websites and particularly likes videos. On her first visit she was taken to the home screen (Figure 2.1). Sally clicks on the 'preferences' link, this takes her to the preferences section and she then selects 'All video' on content selector (Figure 2.2.2). She clicks save on this page which returns her to a new home page displaying only video content. Finally she selects the 'Entertainment' button (Figure 2.1.1) which filters all the videos to show only the ones related to entertainment.
\\

\item John is a 20 year old student studying Geography at Strathclyde University. John has very little spare time and bad eyesight, he likes to keep informed about the real issues in the world. John is a regular user who always uses the Internet through his laptop, he likes the fact he does not need to log in every time he wants to view some news but his preferences are still saved (through a cookie from his first session). During his first session he went into the preferences section and changed the font size to 24 to make his viewing easier and clicked save, saving the cookie to his browser.
\\
\item Billy 19 year old student studying Maths at the University of Glasgow. He is involved in student activism as active member of Amnesty International and the socialist workers party. Neutral News caters for Billy's need for news not centered around Western views and opinions. Billy has used Neutral News before but is visiting the site from a new computer. He is taken to the main page (Figure 2.1) and notices that certain sources he doesn't like are appearing. Using the preferences link on the home page he enters the preference section and un-selects the sources he doesn't trust (Figure 2.2.1). Clicking save he is returned to the home, both the videos and text headlines from his un-selected sources have disappeared.
\end{itemize}


\subsection{User Experience}
The default interface for Neutral News is designed to be intuitive and clutter free. 
\\
\\
The team noticed that some competitors in the online news market tend to present too much information on the one page. This may provide more information but at the cost of a confusing interface. 
\\
\\
The main page (\textbf{Figure 2.1}) was designed to combat this problem, we use simple
video "tiles" and short descriptive titles to give a more fluid and visual-based interface. 
\\
\\
The design takes ideas from mobile phone interface focusing on large text and icons with contrasting colours to give a simple clean look yet using a desktops extra screen size to provide more information and functionality.
\\
\\
The user interface design on the configuration page (\textbf{Figure 2.2}) includes several GUI standards which will
be familiar to the user. 
\\
\\
Items such as check boxes, radio and save buttons aim to reduce the learning time associated with using the system. This concept is drawn from Nielsen's usability heuristics[4], where it is stated that a newly designed interface should be consistent with standards already in use.
\\
\\
The overall aim of the interface is to present the information that the user wants in a pleasing format, while
providing useful mechanisms to make the information customisable.


\subsection{Current Artifacts}
There are a number of websites that currently provide functionality similar to ours. 
Most notably is Google news[5], it has a simplified neutral user interface using contrasting colours to make headlines stand out. We wanted to try and follow this theme of simple colours as we found it gave a much cleaner look than other news collecting sites. It was here that we also got the idea of taliored content. At the top of its news feed Google news has a content button which can display just the headlines or expand them to include pictures. We thought this was a great way to change the presentation of the same content to suit the user but wanted to take it a step forward. Google news doesn't support video content which we found fustrating so we wanted this to be included in our application and use the idea of tailored content to change between visual and textual.
\\
\newpage
\subsection{Technologies Used}

\begin{itemize}

\item \textbf{JQuery:}
Provides widgets and client interface functionality.
\item\textbf{CSS:}
Style and appearance of the client interface.
\item\textbf{Django:}
Implementation of the Neutral News server-side.
\item\textbf{FeedParser:}
Parses titles and content from incoming RSS feeds[6].
\end{itemize}

\section{Application Architecture}
The application relies on several key components:

\subsection{Client/Browser}
This part is located on the end-users system. It is responsible for the presentation and visualisation of the news content.
The Browser will store user preferences for the application in the form of cookies.
\subsection{Middleware}
This part of the system makes use of the Django framework. It handles the http requests and responses, parsing the content for presentation at the client end.
\subsection{Back end services} 
This part of the system consists of a variety of news sources.
\textbf{1. Refers to the sites Youtube[7], Al Jazeera[1], BBC[8] and Reuters[2]} 

\includegraphics[scale=0.4]{dim3imgs/N-Tier_Diagram(4)}
\textbf{Figure 3.1 - The N-Tier architecture for Neutral News}
\\
\\

\subsection{Sequence Diagram}
\includegraphics[scale=0.38]{dim3imgs/DIM_sequence_diagram(1)}
\begin{enumerate}
\item User opens the website.
\item Web browser sends an HTTP POST request to the Django webserver, the user is identified by cookies.
\item Send HTTP GET request to AlJazeera's RSS feed.
\item Receive and parse response from Al Jazeera.
\item Send HTTP GET request to Reuters RSS feed.
\item Receive and parse response from Reuters.
\item Send HTTP GET request to BBC's RSS feed.
\item Receive and parse response from BBC.
\item Send HTTP GET request to Youtube API.
\item Receive and parse response from Youtube.
\item Organise presentation of results and forward presentation to the client.
\item Results are presented to the user.
\end{enumerate}


\subsection{Separation of Concerns}
Our application will be broken into three tiers to provide a separation of concerns. This means changes
made on one tier will not spillover onto other tiers.\\

\subsection{Technology choice}
The project could have been completed using Ruby on Rails(RoR)[9] instead of Django. RoR follows the same principles as Django however our tutor advised using Django.\\

\subsection{Web Application Framework}
\subsubsection{Advantages}
Web application frameworks(WAFs) emphasise resizability and pluggability of components. They allow us to release early and release often - one of the mantras of open source development.

\subsubsection{Disadvantages}
Heavy reliance on WAFs could lead to an underestimation of progress timeline i.e. since we may not be
familiarised with all aspects of the framework, it might take more time to use them to our advantage, as
opposed to coding a website from scratch in pure PHP/HTML/Javascript where we would be in a position
to declare our knowledge on each of the languages. Despite the re-usability of WAFs, the rigidity of it
means we must conform to using only the components that the framework provides. Thus development would
be more flexible without having to conform to a framework.\\

\section{Message Parsing}
\begin{itemize}
\item The site actively parses responses based on the current user settings. Whether the user prefers video content or textual content will 
determine what articles are shown. 
\item Video requests will be provided by the news sites corresponding youtube channel.
\item Textual content will be provided by the BBC News RSS feed, Reuters ect. The textual content will be queried
with GET requests to the selected APIs, an Al Jazeera News example is below:
\item The responses from the RSS feeds are in xml, the Feedparser provides a level of abstraction dealing with the parsing of xml.  
\end{itemize}
GET http://www.aljazeera.com/Services/Rss/\\?PostingId=2007731105943979989 HTTP/1.1
\\
<?xml version="1.0" encoding="iso-8859-1"?>
\\
<rss version="2.0">
\\
<channel>
\\
<title>AL JAZEERA ENGLISH (AJE)</title>
\\
<description>Al Jazeera Network</description>
\\
<link>http://www.aljazeera.com/default.html</link>
\\
<image>
\\
<title>AJE</title>
\\
<url>http://www.aljazeera.com/Media/images/\\AJLOGOGOOGLE.png</url>
\\
<link>http://www.aljazeera.com/default.html</link>
\\
</image>
\\
<copyright> 2012 Aljazeera Network</copyright>


\section{Design Revision / Feedback}
\subsection{Summary}
Although some of the feedback was helpful most of it was misguided. An example of this was a comment that the sources used could be bias, although this may be the case it is out of our control. The design document states that the source of the stories will always be clear (Figure 2.2.4) and that the user can easily change any sources they feel to be bias or unsuitable from the preferences menu (Figure 2.1.1).
\\
\\
Other feedback was very subjective and not really focusing on the key areas of our design. An example of this was a reviewer stating that  "making the latest headlines a little bit larger would help". This again may be true but seems very trivial for critical feedback. The reviewer picked out small issues like these but failed to recognise large issues we for when updating the design. An example of this was the first step in our sequence diagram stating that we will be asking the user to log in, a feature which we explicitly stated we would not be making the user do for convenience. Non of the four students reviewing our report noticed this which put us in doubt if they properly read our document. Although there was on reviewer who gave useful, specific and more importantly realistic feedback which would become helpful in our design revision.
\subsection{Revisions}
In our original preferences wireframe the only way the user could return to the index page was to click the 'return home' link. One of the reviewers commented that a user may be unsure whether their changes were going to be saved if they clicked the return home link. Instead a save button should be in its place providing the user with clear way to save their preferences. This was included in our updated preferences wireframe (Figure 2.2.5).
\\
\\
In our original N-Tier diagram description we had stated that the web server was separate from the middleware although the diagram showed it to be part of the middleware. A reviewer noticed this and stating that our description was inconsistent with our diagram. The N-Tier description was updated to reflect the correct state of the diagram.
\subsubsection{Small revisions}
A reviewer noticed some bizarre stray ASCII characters appearing in our report. We realised this was due to us copying the report from our Google document, where it was created, into latex. Some characters the Google document used were unsupported in latex and displayed as strange characters. These have all been removed and corrected.
\\
\\
Another comment was during our description of the advantages of web application frameworks we mentioned that they ease the creation of complex database driven websites, although true this is not relevant as our application doesn't use a database. This was changed to state why the web application frameworks were useful to our project. 
\\
\\
A reviewer noticed that we provided an example for Al Jazera news feed and stated it was a BBC feed. This was corrected.


\section{Implementation Notes}
The main \textbf{views} implemented included "/news" and mapped such that if a different news section was selected, say "Sport" then the view in the address bar  would become "/sport". In that regard, "/news" was implemented as a home page with a mashup of news stories, and each new story would inherit the same template, but display different stories.  In other words, if a user clicked the button "Music" from the home page, a new template "music.html" would be loaded, creating the url extension "/music", and this action would parameterise some RSS retrieval function that grabbed stories from all sources regarding music. External services utilised in the application include:
\begin{itemize}
\item \textbf{feedparser.py} - as recommended by our lecturer, an excellent Atom feed retrieval program written in Python that is used to display all the stories according to category.
\item \textbf{JQuery news ticker} -  a JavaScript application that displays lines of text in a ticker. This was adapted to contain "breaking news" stories from our sources, containing the title of each story that could be clicked to retrieve the publishers website and the full story.
\end{itemize}
Functionality that our website currently incorporates is listed below. At the time of submission of the implementation report, the list is very limited but this will be extended before the project demonstration on the 13th March.
\begin{itemize}
\item Breakdown of news topics as illustrated by wireframes in design and spec report.
\item About popup containing small description of  website.
\item RSS feed from BBC -  one of the intended sources.
\item \textbf{feeds.py} file - an application of Feedparser. Currently includes feed from BBC and can successfully pinpoint feed titles and most recent items. Next step would have been to include the Python variables into the html files and display relevant stories.
\end{itemize}
Known Issues found during website development:
\begin{itemize}
\item Was unable to implement Django templates to pull from our \textbf{feeds.py} file therefore no topics implement the correct links from the main page.
\item The about popup is inteded to set the opacity of the surrounding background to dim and make the popup more clear. It does this excluding (for some unknown  reason) the menu items that select the news topic.
\end{itemize}
Below is a list of all the technologies used during development. Some have been briefly mentioned previously in this chapter.
\begin{itemize}
\item Feedparser - retrieves RSS feeds even if they are poorly constructed.
\item JQuery news ticker - displays text items within <li> tags - is intended to display from certain RSS feeds but could not be properly implemented in time.
\item TinyBox modal popups - used for the "About" link found in the header. Displays a small popup, dimming the background contents to make it more clear for the user.
\item rss2html JavaScript - was used to test how RSS feeds would appear on website.
\end{itemize}

\section{Reflective Summary}
\subsection{Process of Development}
The team learned how to make use of the SVN version control system to effectively develop the application and edit the specification report document through the entire development process.
The team also learned about project management, an example of this was when it became apparent that one of our team mates had little interest in the project. The team firstly responded by reminding the team mate of deadlines and on-going work that had to be done. However when this did not work we had to change the workload of the rest of the group accordingly.
The team learned about agile software development and how to deploy a rapid development process. Since the time constraints for developing the actual application required the team to learn several technologies it was reasonable to change the requirements of the system if and when problems occurred.
The team learned about the importance of the requirements document in delivering an accurate, clear and concise representation of the system.
\subsection{Application of Frameworks}
The flexibility of the project was constrained to an extent because when developing the website we had to conform to the Django framework. Overall the Django framework rapidly increased the speed that we developed the application. We did not have to create the application from scratch and the Django framework is well documented making it easy to find answers to problems.
\subsection{Problems}
Rapidly learning the Django, Css and Jquery technologies presented a significant challenge as these technologies are sufficiently complexed. When we had to collate these technologies together the integration process was not straightforward since we had each learned the technologies separately. During the development process one of our team members did not contribute to the project. This meant a re-organisation of the workload; each of the team members taking on more of the work.
\subsection{Achievements}
\begin{itemize}
\item Creating a light weight user interface that provides a useful service. 
\item Submitting all work in time. 
\item Learning the required technologies in a short amount of time.
\item Harnessing the collective content of several news sites.
\end{itemize}

\section{Summary and Future Work}
Further work on Neutral News could see the implementation of a search function. Allowing the user to enter new topics of interest, not just the
list of topics that the user is currently constrained to.
\\
\\
A greater number of news sources could be introduced. For example the Guardian, CNN and Foxnews. 
\\
\\
A login function could be added to the application. Meaning that no matter what computer the user accesses the site from, as long as they login, the site will correspond accordingly to the user settings.
\\
\\
Introduce functions that allow users to comment, rate on the level of biased in an article.

%%TODO%%

\section{Acknowledgments}
Our thanks to the lecturers and demonstrators for their comments and suggestions that have so far contributed to the design document.
\section{References}
\begin{enumerate}

\item \url{http://www.aljazeera.com}
\item \url{uk.reuters.com}
\item \url{en.wikipedia.org/wiki/Moscow_Rules}
\item \url{http://www.useit.com/papers/heuristic/heuristic_list.html}
\item \url{http://news.google.com}
\item \url{http://code.google.com/p/feedparser}
\item \url{http://www.youtube.com}
\item \url{www.bbc.co.uk/news}
\item \url{rubyonrails.org}

\end{enumerate}

\bibliographystyle{abbrv}
\bibliography{sig-proc}

\end{document}
